<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
        #box{
            width: 1003px;
            height: 164px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        #box .lunbo{
            width: 4016px;
            height: 164px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #box .lunbo img{
            float: left;
            border-right: 1px solid #FFF;
        }
        #box .left{
            width: 28px;
            height: 62px;
            background-image: url(images/left.png);
            position: absolute;
            top: 50px;
            left: 0;     
            opacity: 0.4;
            filter: alpha(opacity=40); 
            display: none;
        }
        #box .right{
            width: 28px;
            height: 62px;
            background-image: url(images/right.png);
            position: absolute;
            top: 50px;
            right: 0;
            opacity: 0.4;
            filter: alpha(opacity=40);
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var c=0;
            $('#box').find('.lunbo').mouseover(function() {
                $('#box').find('.left').show();
                $('#box').find('.right').show();
            });
             $('#box').find('.lunbo').mouseout(function() {
                $('#box').find('.left').hide();
                $('#box').find('.right').hide();
            });
            $('#box').find('.left').mouseover(function() {
                $(this).show();
                $('#box').find('.right').show();
            });
            $('#box').find('.right').mouseover(function() {
                $(this).show();
                $('#box').find('.left').show();
            });
            $('#box').find('.left').click(function() {
                c--;
                c = (c==-1)?3:c;
                var left = -1003*c
                $('#box').find('.lunbo').stop().animate({"left":left+"px"}, 1000,'easeOutElastic');
            });
             $('#box').find('.right').click(function() {
                c++;
                c = (c==4)?0:c;
                var left = -1003*c;
                $('#box').find('.lunbo').stop().animate({"left":left+"px"}, 1000,'easeOutElastic');
            });
        })
    </script>
    <title>新页面</title>
  </head>

 <body>
    <div id="box">
        <div class="lunbo">
            <img src="images/1.jpg" alt="" />
            <img src="images/2.jpg" alt="" />
            <img src="images/3.jpg" alt="" />
            <img src="images/4.jpg" alt="" />
            <img src="images/5.jpg" alt="" />
            <img src="images/6.jpg" alt="" />
            <img src="images/7.jpg" alt="" />
            <img src="images/8.jpg" alt="" />
            <img src="images/9.jpg" alt="" />
            <img src="images/10.jpg" alt="" />
            <img src="images/11.jpg" alt="" />
            <img src="images/12.jpg" alt="" />
            <img src="images/13.jpg" alt="" />
            <img src="images/14.jpg" alt="" />
            <img src="images/15.jpg" alt="" />
            <img src="images/16.jpg" alt="" />
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
 </body>
</html>